Implementing a PanelOverlay
Description
Using the PanelOverlay container type in a component.
For an explanation of PanelOverlay containers watch this video or follow the guide below.
Add a PanelOverlay that Appears over Multiple Panels.
In the UX Builder on the UX Controls page check the 'Mobile' checkbox in the controls page toolbar.
Open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.
Highlight the button in the controls tree. In the properties list on the right change the 'Button text' property to read 'Fixed Pos in Layout'.
With the button highlighted open the Containers menu. Click on the [Container] option.
From the 'Container Type' list select 'PanelOverlay' and click 'Insert Around'.
Highlight the opening panel overlay tag in the controls tree, [PanelOverlay: PANELOVERLAY_1].
In the properties list on the right view the 'Container Begin Properties' section. Set the 'PanelOverlay bottom' property to be 70px.
Set the 'PanelOverlay left' property to be 10px.
Set the 'PanelOverlay right' property to be 10px.
Highlight the closing panel overlay tag in the controls tree.
Open the 'Other Controls' menu and add one or two [Button] controls to the component.
Open the 'Data Controls' menu and add a [TextBox] control to the component
Highlight the newly added controls.
Open the 'Panels' menu and click on the [Panel Card] option and click 'Insert Around' to wrap the highlighted controls in a panel card..
Add a second set of controls and wrap them in a second [Panel Card], under the first panel card.
Highlight everything in the controls tree and open the 'Panels' menu. Click on the [Panel Navigator] option to add a panel navigator to the component.
The ux controls tree should look like this:
Run the component in Live Preview. Notice the button in the PanelOverlay container.
Press down on the left mouse button and move the mouse to flip between the two panels in the panel navigator. The Panel Overlay should remain fixed in one place.
See Also